<template>
	<view class="body" >
		
		<u-swiper height="540" mode="dot" :list="goods.detail_img" ></u-swiper>
		
		<view class="header" >
			<view class="title" >{{goods.goods_name}}</view>
			<view class="price" >{{goods.shop_price>0?'¥'+goods.shop_price:'价格面议'}}</view>
			
			<view class="detail" >{{goods.goods_brief}}</view>
		</view>
		
		<u-gap height="10" bg-color="#fafafa"></u-gap>
		
		<!-- 店铺信息 -->
		<view class="store-view" >
			<view class="store-detail" >
				<view class="store-img" >
					<image :src="goods.store_logo" ></image>
				</view>
				<view class="center" >{{goods.store_name}}</view>
				<view>
					<button class="store-btn" @click="goToStore" >进店逛逛</button>
				</view>
			</view>
			<view style="height: 1px;background-color: #f5f5f5;margin-top: 20rpx;padding: 0;" ></view>
			
			<view class="store-detail store-bottom" >
				<view class="bottom-detail" >
					<text style="color: #666;" >商家地址:</text>
					<text >{{goods.address}}</text>
				</view>
				
				<view  class=" btn btn1" @click="copy(goods.address)">复制</view>
				<view class=" btn btn2" @click="navToMap()">导航</view>
			</view>
		</view>
		<!-- 店铺信息 -->
		
		<u-gap height="10" bg-color="#fafafa"></u-gap>
		
		<!-- 推荐信息开始 -->
		<view class="recommend-view">
			<view class="recommend-tit" @click="storeList" >
				<view >店铺推荐</view>
				<view @click="goToStore" style="color: #ccc;" >
					查看全部
					<u-icon name="arrow-right" color="#ccc" ></u-icon>
				</view>
			</view>
			
			<u-grid :col="3" :border="false" >
				<u-grid-item v-for="(item,index) in goodsList" :key="index" >
					<view class="recommend-img" >
						<image :src="item.goods_img" mode="aspectFill" ></image>
					</view>
					<view class="grid-text">{{item.goods_name}}</view>
					<view class="grid-price">{{item.shop_price>0?'¥'+item.shop_price:'价格面议'}}</view>
				</u-grid-item>
			</u-grid>
			
		</view>
		<!-- 推荐信息结束 -->
		
		<u-gap height="10" bg-color="#fafafa"></u-gap>
		
		<!-- 宝贝详情开始 -->
		<view class="goods-detail" >
			
			<u-divider half-width="150" >宝贝详情</u-divider>
			<u-parse :html="goods.goods_detail"></u-parse>
		</view>
		<!-- 宝贝详情结束 -->
		
		<!-- 猜你喜欢开始 -->
		<view class="guess-view" >
			<u-divider bg-color="#fafafa" half-width="150" >猜你喜欢</u-divider>
			
			<guess-view class="guess" :tabList="storeList" @clickStore="clickStore" ></guess-view>
		</view>
		<!-- 猜你喜欢结束 -->
		
	</view>
</template>

<script>
	
	import guessView from '@/components/guess.vue'
	
	export default{
		
		components:{
			"guess-view": guessView
		},
		
		data(){
			return{
				goods:"",
				storeList:[],
				goodsList:[],
				form: {
					pageNum: 3,
					page: 1,
					store_id: ''   ,//店铺ID
					goods_type: ''   ,//普通商品还是积分商品
					type_sort: 1	   ,//1.综合排序 2.信用排序 3.价格降序 4.价格升序 5.销量排序
					goods_name: ''    //
				},
			}
		},
		onLoad(option) {
			this.getGoodsDetail(option.id);
			this.getClassifyList();
		},
		methods:{
			copy(address){
				uni.setClipboardData({
				    data: address,
				    success: function () {
				        uni.showToast({
				        	title:'复制成功'
				        })
				    }
				});
			},
			navToMap(){
				let that = this;
				uni.openLocation({
				    latitude: Number(that.goods.lat),
				    longitude:  Number(that.goods.long),
					name:that.goods.store_name,
					address:that.goods.address,
				    success: function () {
				        console.log('success');
				    },
					fail:function(res){
						console.log('res',res)
					}
				});
			},
			getGoodsDetail(id){
				this.$https.Classification.getGoodsDetail(id).then(res=>{
					this.goods = res;
					this.form.store_id = this.goods.store_id;
					this.getGoodsList();
				})
			},
			getGoodsList(){
				this.$https.Classification.getStoreList(this.form).then(res=>{
					this.goodsList = res.data;
				})
			},
			getClassifyList(){
				this.$https.Index.getClassifyStore().then(req => {
					this.storeList = req
				})
			},
			// storeList(){  //更多，跳转到店铺列表
			// 	uni.navigateTo({
			// 		url: './searchList'
			// 	})
			// },
			goToStore(){  //进入当前店铺
				uni.navigateBack();
			},
			clickStore(item){
				uni.navigateTo({
					url: "../Store/storeGoods?data="+JSON.stringify(item)
				})
			},
		}
	}
	
</script>

<style lang="scss" scoped >
	
	page,.body{
		width: 100%;
		height: 100%;
		
		background-color: rgb(250,250,250);
	}
	
	button::after{
		border: none;
		background-color: none;
	}
	
	//商品信息开始
	.header{
		
		padding: 20rpx 30rpx;
		background-color: #FFFFFF;
		
		.title{
			padding-bottom: 10rpx;
			font-size: $uni-font-size-base;
			font-weight: 800;
		}
		
		.price{
			padding-bottom: 10rpx;
			color: $uni-color-error;
			font-size: $uni-font-size-lg;
		}
		
		.detail{
			padding-bottom: 10rpx;
			color: #666;
			font-size: $uni-font-size-sm;
		}
	}
	//商品信息结束
	
	// 店铺信息开始
	.store-view{
		padding: 20rpx 30rpx;
		background-color: #FFFFFF;
		
		.store-detail{
			display: flex;
			align-items: center;
			justify-content: space-between;
		}
		
		.store-img{
			width: 70rpx;
			height: 70rpx;
			
			image{
				width: 100%;
				height: 100%;
			}
		}
		
		.center{
			flex: 1;
			margin-left: 20rpx;
			text-align: left;
		}
		
		.store-btn{
			
			height: 56rpx;
			line-height: 56rpx;
			
			background-color: $uni-color-error;
			color: #FFFFFF;
			font-size: $uni-font-size-base;
			border-radius: 30rpx;
		}
		
		.store-bottom{
			
			
			.bottom-detail{
				margin-top: 20rpx;
				flex: 1;
			}
			
			.btn{
				
				margin-top: 12rpx;
				
				// height: 50rpx;
				// line-height: 50rpx;
				
				padding: 0rpx 20rpx;
				
				font-size: $uni-font-size-sm;
				border-radius: 8rpx;
				
				background-color: #FFFFFF;
			}
			
			.btn1{
				margin-right: 20rpx;
				color: $uni-color-error;
				border: 1rpx solid $uni-color-error;
				
			}
			.btn2{
				color: #333;
				border: 1rpx solid #333;
			}
			
			button:::after{
				margin: 0;
				padding: 0;
			}
		}
		
		
	}
	// 店铺信息结束
	
	// 店铺推荐开始
	.recommend-view{
		padding: 20rpx 20rpx 0 20rpx;
		font-size: $uni-font-size-base;
		
		background-color: #FFFFFF;
		
		.recommend-tit{
			display: flex;
			align-items: center;
			justify-content: space-between;
		}
		
		.recommend-img{
			
			width: 70%;
			height: 160rpx;
			
			image{
				width: 100%;
				height: 100%;
			}
		}
		
		.grid-text{
			margin: 14rpx 0 10rpx 0;
			text-overflow: -o-ellipsis-lastline;
			overflow: hidden;
			text-overflow: ellipsis;
			display: -webkit-box;
			-webkit-line-clamp: 1;
			line-clamp: 1;
			-webkit-box-orient: vertical;
		}
		
		.grid-price{
			color: $uni-color-error;
		}	
	}
	// 店铺推荐结束
	
	
	// 宝贝详情开始
	.goods-detail{
		
		padding-top: 20rpx;
		background-color: #FFFFFF;
	}
	// 宝贝详情结束
	
	
	// 猜你喜欢开始
	.guess-view{
		padding: 30rpx 0;
		
		background-color: rgb(250,250,250);
	}
	// 猜你喜欢结束
	
</style>
